<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Alias Manager Options</title>
    <link rel="stylesheet" href="Styles/options.css">
</head>
<body>
    <div class="container">
        <h1 class="title">Tab Alias Manager Options</h1>
        
        <div class="form-container">
            <form id="aliasForm" class="alias-form">
                <label for="url">URL</label>
                <input type="text" id="url" name="url" required>

                <label for="alias">Alias</label>
                <input type="text" id="alias" name="alias" required>

                <button type="submit" class="add-button">Add/Update</button>
            </form>
        </div>

        <div class="list-container">
            <h2 class="subtitle">Saved Aliases</h2>
            <table id="saved-aliases-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Alias</th>
                        <th>URL</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div>
            <button id="export-btn" class="expt-button">导出数据</button>
            <button id="import-btn" class="impt-button">导入数据</button>
        </div>
    </div>

    <script src="Scripts/options.js"></script>
</body>
</html>